import React, { Component } from "react";
import { Flex, WhiteSpace } from "antd-mobile";
import { withRouter } from "react-router-dom";

import ImageNav1 from "../../assets/images/nav-1.png";
import ImageNav2 from "../../assets/images/nav-2.png";
import ImageNav3 from "../../assets/images/nav-3.png";
import ImageNav4 from "../../assets/images/nav-4.png";

class Nav extends Component {
  state = {};
  render() {
    return (
      <div>
        <Flex>
          <Flex.Item>
            <Flex direction="column">
              <Flex.Item>
                <img
                  style={{ height: "48px", width: "48px" }}
                  src={ImageNav1}
                  alt="整租"
                />
              </Flex.Item>
              <Flex.Item>
                <span>整租</span>
              </Flex.Item>
            </Flex>
          </Flex.Item>
          <Flex.Item>
            <Flex direction="column">
              <Flex.Item>
                <img
                  style={{ height: "48px", width: "48px" }}
                  src={ImageNav2}
                  alt="合租"
                />
              </Flex.Item>
              <Flex.Item>
                <span>合租</span>
              </Flex.Item>
            </Flex>
          </Flex.Item>
          <Flex.Item>
            <Flex
              direction="column"
              onClick={() => {
                this.props.history.push("/map");
              }}
            >
              <Flex.Item>
                <img
                  style={{ height: "48px", width: "48px" }}
                  src={ImageNav3}
                  alt="地图找房"
                />
              </Flex.Item>
              <Flex.Item>
                <span>地图找房</span>
              </Flex.Item>
            </Flex>
          </Flex.Item>
          <Flex.Item>
            <Flex direction="column">
              <Flex.Item>
                <img
                  style={{ height: "48px", width: "48px" }}
                  src={ImageNav4}
                  alt="去出租"
                />
              </Flex.Item>
              <Flex.Item>
                <span>去出租</span>
              </Flex.Item>
            </Flex>
          </Flex.Item>
        </Flex>
      </div>
    );
  }
}

export default withRouter(Nav);
